import { ICollectionVariable, IVariableList } from '@/modules/interface';
import styled from '@emotion/styled';
import { Input, Row, Divider, Modal, Button } from 'antd';
import React from 'react';
import AgentService from '@/modules/Agent';
import useSyncState from '../hooks/useSyncState';
import { useTranslation } from 'react-i18next';

interface CollectionVariableDetailProps {
	data: IVariableList[];
	userName: string;
	clientId: string;
	userRole: string;
}

const Container = styled.div``;

const UserNameSpan = styled.span`
	display: inline-block;
	font-size: 13px;
	color: #333333;
	margin-bottom: 12px;
`;

const UserRoleSpan = styled.span`
	display: inline-block;
	font-size: 13px;
	color: #333333;
	margin-bottom: 12px;
	margin-left: 20px;
`;

const DetailContent = styled.div`
	width: 319px;
	height: 405px;
	background: #f9f9f9;
	overflow-y: auto;
`;

const DetailDesc = styled.span`
	display: inline-block;
	font-size: 13px;
	color: #333333;
	margin-bottom: 10px;
`;

const DetailText = styled.div`
	display: flex;
	align-items: center;
	height: 34px;
	border-radius: 4px;
	border: 1px solid #e5e5e5;
`;

const DeatilItem = styled.div`
	border-bottom: 1px solid #f1f1f1;
	margin: 0 10px;
	padding: 10px 0 14px 0;
`;

const DeatilSpan = styled.span`
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	margin-left: 10px;
`;

const CollectionVariableDetail = (props: CollectionVariableDetailProps) => {
	const { t } = useTranslation();
	const { data, userName, clientId, userRole } = props;
	const [isVariableModalOpen, setIsVariableModalOpen] = useSyncState(true);

	const filterResponseVariabelData = () => {
		AgentService.responseVariabelData = AgentService.responseVariabelData.filter(item => item.clientId !== clientId);
		setIsVariableModalOpen(false);
	};

	return (
		<Container className="collection-variable-detail">
			<Modal
				title={t('confirm-variable-collection-result')}
				open={isVariableModalOpen()}
				onOk={filterResponseVariabelData}
				onCancel={filterResponseVariabelData}
				width={367}
				maskClosable={false}
				footer={
					<Button type="primary" onClick={filterResponseVariabelData}>
						{t('confirm')}
					</Button>
				}
			>
				<UserNameSpan>
					{t('client')}：{userName}
				</UserNameSpan>
				<UserRoleSpan>
					{t('role')}：{userRole}
				</UserRoleSpan>
				<DetailContent>
					{data.map(item => {
						return (
							<DeatilItem key={item.id}>
								<DetailDesc>{item.name}</DetailDesc>
								<DetailText>
									<DeatilSpan>{item.value}</DeatilSpan>
								</DetailText>
							</DeatilItem>
						);
					})}
				</DetailContent>
			</Modal>
		</Container>
	);
};

export default CollectionVariableDetail;
